<template>
  <div class="my-welfare clear">
    <div class="result-list">
      <div class="item top-item">
        <div class="flex-name clear">
          <img class="head-img" :src="info.head_pic" alt="">
          <div class="name-info">
            <p class="name">{{info.nickname}}</p>
            <p class="info"><img src="@/assets/wode01.png" alt=""> <span>{{info.level_name}}</span></p>
          </div>
          <img @click="router({path: './edit'})" src="@/assets/wode02.png" class="edit" alt="">
        </div>
        <div class="flex-num">
          <div class="block">
            <p class="num">{{collect}}</p>
            <p class="text">课程收藏</p>
          </div>
          <div class="block" style="flex: 2">
            <p class="num">{{store}}</p>
            <p class="text">办卡门店</p>
          </div>
          <div class="block">
            <p class="num">{{welfare}}</p>
            <p class="text">支持的项目</p>
          </div>
        </div>
      </div>
      <div class="item">
        <p class="title">天赋测试</p>
        <div class="flex-num section">
          <div class="block" @click="router({path: './keyManagement'})">
            <p class="num"><img src="@/assets/wode03.png" alt=""></p>
            <i class="icon">推荐</i>
            <p class="text">密钥管理</p>
          </div>
          <div class="block" @click="router({path: './myExam'})">
            <p class="num"><img src="@/assets/wode05.png" alt=""></p>
            <p class="text">测试结果</p>
          </div>
          <div class="block" v-show="cate_list > 0" @click="router({path: './planMake'})">
            <p class="num"><img src="@/assets/wode06.png" alt=""></p>
            <p class="text">方案定制</p>
          </div>
          <div class="block" v-show="cate_list <= 0" @click="router({path: './customized'})">
            <p class="num"><img src="@/assets/wode06.png" alt=""></p>
            <p class="text">方案定制</p>
          </div>
        </div>
      </div>
      <div class="item">
        <p class="title">我的课程</p>
        <div class="flex-num section">
          <div class="block" @click="router({path: './myCourse'})">
            <p class="num"><img src="@/assets/wode07.png" alt=""></p>
            <p class="text">购买的课程</p>
          </div>
          <div class="block" @click="router({path: './courseCollect'})">
            <p class="num"><img src="@/assets/wode08.png" alt=""></p>
            <p class="text">课程收藏</p>
          </div>
          <div class="block" @click="router({path: './purchaseRecord'})">
            <p class="num"><img src="@/assets/wode09.png" alt=""></p>
            <p class="text">购买课程记录</p>
          </div>
        </div>
      </div>
      <div class="item">
        <p class="title">更多功能</p>
        <div class="flex-num section">
          <div class="block" @click="router({path: './myStore'})">
            <p class="num"><img src="@/assets/wode10.png" alt=""></p>
            <p class="text">我的门店</p>
          </div>
          <div class="block" @click="router({path: './myStudy'})">
            <p class="num"><img src="@/assets/wode11.png" alt=""></p>
            <p class="text">我的学习</p>            
            <i class="icon">精彩</i>
          </div>
          <div class="block" @click="router({path: './myTrain'})">
            <p class="num"><img src="@/assets/wode12.png" alt=""></p>
            <p class="text">我的培训</p>
          </div>
        </div>
        <div class="flex-num section">
          <div class="block" @click="router({path: './share'})">
            <p class="num"><img src="@/assets/wode13.png" alt=""></p>
            <p class="text">分享给好友</p>
          </div>
          <div class="block" @click="router({path: './about'})">
            <p class="num"><img src="@/assets/wode14.png" alt=""></p>
            <p class="text">关于我们</p>
          </div>
          <div class="block" @click="is_mask = true">
            <p class="num"><img src="@/assets/wode15.png" alt=""></p>
            <p class="text">联系客服</p>
          </div>
        </div>
      </div>
    </div>    
    <div class="mask-div" v-if="is_mask">
      <div class="mask-bg" @click="is_mask = false"></div>
      <div class="content">
        <img src="@/assets/huanyingzixun.png" alt="">
        <p class="title">我们会全心全意为您提供满意的<br>咨询服务</p>
        <p class="tip">若需要增加方案定制次数，请购买增量密钥</p>
        <a class="btn" :href="'tel:'+contPhones">联系客服</a>
      </div>
    </div>
  </div>
</template>

<script>
import {personal, contPhone, myplancate} from '@/api/api'

  export default {
    components: {
    },
    data () {
      return {
        is_mask: false,
        info:[],
        collect:'',
        store:'',
        welfare:'',
        contPhones: "",
        cate_list: "",
      }
    },
    created () {
      this.persona()
      this.plancate()
      this.cont_phone()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      persona(){
        personal().then((res) =>{
          this.info=res.data.data.user
          this.collect=res.data.data.collect
          this.store=res.data.data.store
          this.welfare=res.data.data.welfare
        }).catch((err) => {
          console.dir(err)
        })
      },
      cont_phone() {
        contPhone().then((res) => {
          this.contPhones = res.data.data.phone;
        }).catch((err) => {
          console.dir(err)
        })
      },
      plancate(){
        myplancate().then((res) =>{
          this.cate_list=res.data.data.list.length
        }).catch((err) => {
          console.dir(err)
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.my-welfare
  min-height 100vh
  min-width 100vw
  background-color #f5f5f5
  padding-bottom 5rem
  box-sizing border-box
  .result-list
    padding-top 2rem
    background-image url('../../assets/jiangshijieshao01.png')
    background-repeat no-repeat
    background-size 100%
    width 100%
    .top-item      
      padding 1.2rem 1.6rem
    .item
      width 92%
      margin-left 4%
      border-radius .3rem
      background-color #fff
      box-sizing border-box
      margin-bottom 1rem
      .flex-name
        padding-bottom 2rem
        position relative
        .edit
          position absolute
          right -1.6rem
          width 6.8rem
          top 1.1rem
        .head-img
          width 5rem
          height 5rem
          overflow hidden
          border-radius 50%
          float left
          margin-right 1rem
        .name-info
          float left
          line-height 2.3rem
          .name
            font-size 1.7rem
            color #333
            font-weight bold
            margin-top .4rem
          .info
            font-size 1.2rem
            color #152D6F
            img
              display inline-block
              vertical-align middle
              width 1.2rem
              height 1.2rem
              position relative
              top -.1rem
            span
              display inline-block
              vertical-align middle
      .flex-num
        display flex
        .block
          flex 1
          text-align center
          position relative
          .icon
            position absolute
            width 3.2rem
            line-height 1.6rem
            height 1.6rem
            color #fff
            background-color #ED4632
            border 1px solid #fff
            border-radius 100px 100px 100px 0px
            font-size 1rem
            top -.8rem
            left 6.3rem
          .num
            font-size 1.9rem
            color #333
            font-weight bold
            height 2.5rem
            line-height 2.5rem
            margin-bottom .7rem
            img
              width 2.5rem
              display inline-block
          .text
            font-size 1.2rem
            color #666
      .title
        color #333
        font-size 1.5rem
        font-weight bold
        border-bottom 1px solid #e6e6e6
        line-height 4.5rem
        height 4.5rem
        padding 0 1.6rem 
      .section
        padding 1.6rem 0  
  .content
    background-color #fff
    width 72%
    margin-left 14%
    padding .5rem
    box-sizing border-box
    top 9rem
    text-align center
    .title
      font-size 1.5rem
      color #333
      margin-top 1rem
      font-weight bold
    .tip
      font-size 1.1rem
      color #333
      height 1.1rem
      line-height 1.1rem
      margin-top 1.8rem
    .btn
      color #172F6D
      border 1px solid #172F6D
      height 3.6rem
      line-height 3.6rem
      text-align center
      border-radius 100px
      display block
      width 20rem
      margin-top 2.5rem
      margin-bottom 1.6rem
      position relative
      left 50%
      margin-left -10rem
      font-size 1.3rem
</style>
